import React, { useState, FC } from 'react'
import { View, Button } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import { AtTextarea, AtRate } from 'taro-ui'
import api from '@/services/config/index'
import { showToast } from '@/utils/common'

import './index.scss'

const AddEvaluate: FC = () => {
  const [description, setDescription] = useState<string>('')
  const [score, setScore] = useState<number>(5)
  const { params } = useRouter()
  function sureEvaluate() {
    if (!description) {
      showToast('评级理由不能为空')
      return
    }
    api['orderList/addEvaluation']({
      orderId: params.orderId,
      evaluation: String(score),
      evaluationContent: description
    }).then(() => {
      showToast('评级成功')
      Taro.navigateBack({ delta: 1 })
    })
  }

  return (
    <View className='addEvaluate'>
      <AtTextarea
        value={description}
        onChange={(value) => {
          setDescription(value)
        }}
        maxLength={100}
        placeholder='请求输入评价'
        fixed
        count
        height={320}
      />
      <View className='addEvaluate-score'> 评价打分</View>
      <AtRate
        size={22}
        value={score}
        onChange={(val) => {
          setScore(Number(val))
        }}
        margin={30}
      />
      <Button className='commmon-btn' onClick={sureEvaluate}>
        确认评价
      </Button>
    </View>
  )
}

export default AddEvaluate
